<template>
  <div class="wrapper">
    <div class="view" ref="view"></div>
    <div class="select">
      <img @click="openUpload" src="@/assets/image/Customerservice_Sendpictures@2x.png" />
      <template v-if="isShow">
        <el-upload
          :action="imageUrl"
          list-type="picture-card"
          :on-success="UserImgSuccess"
          :on-remove="UserImgtRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </template>
    </div>
    <div class="input">
      <textarea
        :disabled="disabled"
        @keydown="entrySend($event)"
        ref="text"
        rows="5"
        name="S1"
        cols="20"
      />
      <button @click="sendText">发送</button>
      <!-- 根域名服务器再向 -->
    </div>
  </div>
</template>

<script>
export default {
  props: ["userMessage"],
  data() {
    return {
      imgUrl: "",
      isShow: false,
      disabled: false
    };
  },
  watch: {
    userMessage() {
      console.log(this.userMessage);
      this.userTransmitMessage();
    }
  },
  methods: {
    sendText() {
      if (this.imgUrl != "") {
        this.sendImg();
        return;
      }
      if (this.$refs.text.value.trim() == "") return;
      // 给父组件传递聊天对话信息
      this.$emit("receiveMessage", this.$refs.text.value);
      // 读取img图片的数据
      let div = document.createElement("div");
      div.innerHTML = `<div> <img  src="${"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1649554161,3942481746&fm=115&gp=0.jpg"}"/>
                           <span> ${this.$refs.text.value} </span> </div>`;
      div.className = "doctor chatbox";
      this.$refs.view.appendChild(div);
      this.$refs.text.value = "";
      this.$refs.view.scrollTop = this.$refs.view.scrollHeight;
    },
    sendImg() {
      this.$emit("receiveMessage", this.imgUrl);
      let div = document.createElement("div");
      div.innerHTML = `<div> <img  src="${"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1649554161,3942481746&fm=115&gp=0.jpg"}"/>
                           <span class='img'> <img src='${
                             this.imgUrl
                           }'/> </span> </div>`;
      div.className = "doctor chatbox";
      this.$refs.view.appendChild(div);
      this.$refs.view.scrollTop = this.$refs.view.scrollHeight;
      this.openUpload();
    },
    entrySend(e) {
      if (this.$refs.text.value.trim() == "") return;
      if (e.keyCode === 13) {
        this.sendText();
      }
    },
    UserImgSuccess(response) {
      this.imgUrl = response.data.file.url;
    },
    UserImgtRemove() {
      this.imgUrl = "";
    },
    openUpload() {
      this.imgUrl = "";
      this.disabled = !this.disabled;
      this.isShow = !this.isShow;
    },
    // 用户传递的信息
    userTransmitMessage() {
      // 传递的是图片
      if ( this.userMessage.result.message.includes('http://lianzhong.jzbwlkj.com/upload/') ) {
           let div = document.createElement("div");
           div.innerHTML = `<div> <img  src="${"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1649554161,3942481746&fm=115&gp=0.jpg"}"/>
                           <span class='img'> <img src='${ this.userMessage.result.message }'/> </span> </div>`;
           div.className = "user chatbox";
           this.$refs.view.appendChild(div);
        
      } else {
      // 传递的是文本信息 
        let div = document.createElement("div");
        div.innerHTML = `<div> <img  src="${"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3510193254,630264922&fm=26&gp=0.jpg"}"/>
                           <span> ${
                             this.userMessage.result.message
                           } </span> </div>`;
        div.className = "user chatbox";
        this.$refs.view.appendChild(div);
      }
      this.$refs.view.scrollTop = this.$refs.view.scrollHeight;
    },
    
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  width: 62.5%;
  height: 100%;
  position: absolute;
  left: 0px;
  min-width: 750px;
}
.view {
  position: absolute;
  width: 100%;
  height: calc(100% - 150px - 70px);
  border-right: 1px solid #999;
  overflow: scroll;
}
.select {
  width: 100%;
  min-width: 750px;
  height: 40px;
  background: #ddd;
  position: absolute;
  border: 1px solid #999;
  z-index: 999;
  bottom: 200px;
  width: 100%;
  img {
    width: 22px;
    height: 18px;
    margin-top: 8px;
    margin-left: 20px;
    cursor: pointer;
  }
}
.select /deep/ .el-upload {
  position: absolute;
  top: -160px;
  left: 20px;
}
.select /deep/ .el-upload-list__item {
  position: absolute;
  top: -160px;
  left: 20px;
  z-index: 999;
}
.input {
  width: 100%;
  height: 200px;
  border: 1px solid #999;
  position: absolute;
  bottom: 0px;
  textarea {
    padding-top: 18px;
    width: 100%;
    height: 150px;
    font-size: 22px;
    border: 0px;
  }
  button {
    width: 70px;
    height: 35px;
    border-radius: 8px;
    position: absolute;
    top: 100px;
    right: 10px;
  }
}
.chatbox {
  width: 300px;
  font-size: 30px;
  float: right;
  overflow: hidden;
  text-align: right;
  span {
    float: right;
  }
  img {
    float: right;
  }
}
</style>